<style lang="less">
</style>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <card>
      <Row>
        <Col span="3" align="center" style="line-height: 2;">导出数据库标识</Col>
        <Col span="4">
          <Input v-model="searchData.export_database" style="width: 80%"  placeholder="请输入导出数据库标识"></Input>
        </Col>
        <Col span="3" align="center" style="line-height: 2;">导出数据库名称</Col>
        <Col span="4">
          <Input v-model="searchData.export_database_name" style="width: 80%"  placeholder="请输入导出数据库名称"></Input>
        </Col>
        <Col span="2" align="center" style="line-height: 2;">状态</Col>
        <Col span="3">
         <Select v-model="searchData.export_state" style="width: 70%">
           <Option value="">全部</Option>
           <Option value="0">未启用</Option>
           <Option value="1">已启用</Option>
         </Select>
        </Col>
        <Col span="3">
          <Button type="primary" icon="ios-search"  @click="init">搜索</Button>
        </Col>
      </Row>
    </card>
    <card style="margin-top: 1%">
      <Row>
        <Col span="3">
          <Button type="primary" icon="md-add-circle" @click="addDataBase">添加</Button>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <Table border stripe :columns="columns" ref="selection" :data="dataList" style="margin-top: 1%;">
            <template slot-scope="{ row, index }" slot="export_database_name">
              <Input v-if="!row.disabled" :disabled="row.disabled" v-model="row.export_database_name"></Input>
              <span  v-if="row.disabled">{{row.export_database_name}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="export_state">
              <i-switch v-if="!row.disabled" :disabled="row.disabled" v-model="row.export_state" true-value="1" false-value="0" true-color="#13ce66" false-color="#ff4949" size="large">
                <span  slot="open">启用</span>
                <span  slot="close">关闭</span>
              </i-switch>
              <span  v-if="row.disabled">{{row.state}}</span>
            </template>
          </Table>
        </Col>
      </Row>
      <Row type="flex" justify="end" style="margin-top: 1%">
        <Page :current="pageNo" :total="totalnum" show-sizer :page-size="pageSize"
              show-total @on-change="changePageNo" @on-page-size-change="changePagesize"/>
      </Row>
    </card>
    <Modal v-model="modal.show" :title="modal.title" width="360">
      <Form :model="formData" :label-width="100">
        <FormItem label="导出数据库标识">
          <Input v-model="formData.export_database" ></Input>
        </FormItem>
        <FormItem label="导出数据库名称">
          <Input v-model="formData.export_database_name"></Input>
        </FormItem>
        <FormItem label="table_schema">
          <Input v-model="formData.table_schema"></Input>
        </FormItem>
        <FormItem v-if="modal.type === '2'" label="状态">
          <RadioGroup v-model="formData.export_state" >
            <Radio label="1" border>启用</Radio>
            <Radio label="0" border>未启用</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal.show = false">取消</Button>
        <Button v-if="modal.type === '1'" type="primary" @click="addDataBaseOk">保存</Button>
        <Button v-if="modal.type === '2'" type="primary" @click="updateDataBaseOk">保存</Button>
      </div>
    </Modal>
    <Modal v-model="modal1.show" :title="modal1.title" width="360">
      <Form :model="formData1" :label-width="120">
        <FormItem label="导出数据库表">
          <Input v-model="formData1.export_database_table" ></Input>
        </FormItem>
        <FormItem label="导出数据库表名称">
          <Input v-model="formData1.export_database_table_name"></Input>
        </FormItem>
        <FormItem label="table_schema">
          <Input v-model="formData1.table_schema"></Input>
        </FormItem>
        <FormItem v-if="modal1.type === '2'" label="状态">
          <RadioGroup v-model="formData1.export_state" >
            <Radio label="1" border>启用</Radio>
            <Radio label="0" border>未启用</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modal1.show = false">取消</Button>
        <Button v-if="modal1.type === '1'" type="primary" @click="addDataBaseOk">保存</Button>
        <Button v-if="modal1.type === '2'" type="primary" @click="updateDataBaseTableOk">保存</Button>
      </div>
    </Modal>
    <Modal v-model="infoModal.show" :title="infoModal.title" width="80%">
      <card>
        <Row>
          <Col span="3" align="center" style="line-height: 2;">导出数据库表</Col>
          <Col span="4">
            <Input v-model="searchData1.export_database_table" style="width: 80%"  placeholder="请输入导出数据库表"></Input>
          </Col>
          <Col span="3" align="center" style="line-height: 2;">导出数据库表名称</Col>
          <Col span="4">
            <Input v-model="searchData1.export_database_table_name"  style="width: 80%"  placeholder="请输入导出数据库表名称"></Input>
          </Col>
          <Col span="2" align="center" style="line-height: 2;">状态</Col>
          <Col span="3">
            <Select v-model="searchData1.export_state" style="width: 70%">
              <Option value="">全部</Option>
              <Option value="0">未启用</Option>
              <Option value="1">已启用</Option>
            </Select>
          </Col>
          <Col span="3">
            <Button type="primary" icon="ios-search" @click="getExportDataBaseTablePageList">搜索</Button>
          </Col>
        </Row>
      </card>
      <card style="margin-top: 1%">
        <Row>
          <Col span="3">
            <Button type="primary" icon="md-add-circle" @click="addDataBaseTable">添加</Button>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <Table border stripe :columns="columns1" ref="selection" :data="dataList1" style="margin-top: 1%;">
              <template slot-scope="{ row, index }" slot="export_database_table_name">
                <Input v-if="!row.disabled" :disabled="row.disabled" v-model="row.export_database_table_name"></Input>
                <span  v-if="row.disabled">{{row.export_database_table_name}}</span>
              </template>
              <template slot-scope="{ row, index }" slot="export_state">
                <i-switch v-if="!row.disabled" :disabled="row.disabled" v-model="row.export_state" true-value="1" false-value="0" true-color="#13ce66" false-color="#ff4949" size="large">
                  <span  slot="open">启用</span>
                  <span  slot="close">关闭</span>
                </i-switch>
                <span  v-if="row.disabled">{{row.state}}</span>
              </template>
            </Table>
          </Col>
        </Row>
        <Row type="flex" justify="end" style="margin-top: 1%">
          <Page :current="pageNo1" :total="totalnum1" show-sizer :page-size="pageSize1"
                show-total @on-change="changePageNo1" @on-page-size-change="changePagesize1"/>
        </Row>
      </card>
    </Modal>
    <Modal v-model="addTableModal.show" :title="addTableModal.title" width="75%" @on-ok="addDataBaseTableOk">
      <Row>
        <Col offset="2" span="22">
          <Transfer
            :data="tableData"
            :target-keys="targetKeys"
            :list-style="listStyle"
            :render-format="render"
            :operations="['To left','To right']"
            filterable
            @on-change="handleChange">
            <!--        <div :style="{float: 'right', margin: '5px'}">-->
            <!--          <Button size="small" @click="reloadMockData">Refresh</Button>-->
            <!--        </div>-->
          </Transfer>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import { getExportDataBaseList,
  insertExportDataBase,
  updateExportDataBase,
  deleteExportDataBase,
  getDataBaseNameList,
  getExportDataBaseTablePageList,
  updateExportDataBaseTable,
  deleteExportDataBaseTable,
  insertExportDataBaseTableList } from '@/api/eventlist'
export default {
  components: {
  },
  data () {
    return {
      disabled: true,
      searchData: {},
      searchData1: {},
      row: {},
      export_database_id: '',
      tableData: [],
      targetKeys: [],
      listStyle: {
        width: '40%',
        height: '300px'
      },
      modal: {
        title: '',
        show: false,
        type: ''
      },
      modal1: {
        title: '',
        show: false,
        type: ''
      },
      infoModal: {
        title: '导出数据库表明细',
        show: false,
        type: ''
      },
      addTableModal: {
        title: '添加导出数据库表',
        show: false,
        type: ''
      },
      formData: {},
      formData1: {},
      totalnum: 0,
      pageNo: 1,
      pageSize: 10,
      totalnum1: 0,
      pageNo1: 1,
      pageSize1: 10,
      columns: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '导出数据库标识', key: 'export_database', align: 'center' },
        { title: '导出数据库名称', slot: 'export_database_name', align: 'center' },
        { title: 'table_schema', key: 'table_schema', align: 'center' },
        { title: '状态', slot: 'export_state', align: 'center' },
        { title: '操作',
          align: 'center',
          render: (h, params) => {
            let temp = []
            if (params.row.disabled) {
              temp.push(
                h('Button', {
                  props: { type: 'primary', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      this.infoModal.show = true
                      this.row = params.row
                      console.log(this.row, 'rowwwwwwwwwww')
                      this.getExportDataBaseTablePageList(params.row)
                    }
                  }
                }, '明细'),
                h('Button', {
                  props: { type: 'success', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      // this.formData = params.row
                      params.row.disabled = false
                      // console.log(params)
                      // this.modal.title = '编辑导出数据库'
                      // this.modal.show = true
                      // this.modal.type = '2'
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      this.deleteDataBaseOk(params.row)
                    }
                  }
                }, '删除'))
            } else {
              temp.push(h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.formData = params.row
                    this.updateDataBaseOk()
                    params.row.disabled = true
                    // console.log(params)
                    // this.modal.title = '编辑导出数据库'
                    // this.modal.show = true
                    // this.modal.type = '2'
                  }
                }
              }, '保存'),
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.init()
                    params.row.disabled = true
                  }
                }
              }, '取消'))
            }
            return h('div', temp)
          }
        }
      ],
      dataList: [],
      columns1: [
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '导出数据库表', key: 'export_database_table', align: 'center' },
        { title: '导出数据库表名称', slot: 'export_database_table_name', align: 'center' },
        { title: 'table_schema', key: 'table_schema', align: 'center' },
        { title: '状态', slot: 'export_state', align: 'center' },
        { title: '操作',
          align: 'center',
          render: (h, params) => {
            let temp = []
            if (params.row.disabled) {
              temp.push(
                h('Button', {
                  props: { type: 'success', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      params.row.disabled = false
                      // this.formData1 = params.row
                      // console.log(params)
                      // this.modal1.title = '编辑导出数据库表'
                      // this.modal1.show = true
                      // this.modal1.type = '2'
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: { type: 'error', size: 'small' },
                  style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                  on: {
                    click: () => {
                      this.deleteDataBaseTableOk(params.row)
                    }
                  }
                }, '删除')
              )
            } else {
              temp.push(h('Button', {
                props: { type: 'primary', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.formData1 = params.row
                    this.updateDataBaseTableOk()
                    params.row.disabled = true
                    // console.log(params)
                    // this.modal.title = '编辑导出数据库'
                    // this.modal.show = true
                    // this.modal.type = '2'
                  }
                }
              }, '保存'),
              h('Button', {
                props: { type: 'success', size: 'small' },
                style: { marginRight: '5px', marginTop: '2px', marginBottom: '2px' },
                on: {
                  click: () => {
                    this.getExportDataBaseTablePageList()
                    params.row.disabled = true
                  }
                }
              }, '取消'))
            }
            return h('div', temp)
          }
        }
      ],
      dataList1: []
    }
  },
  methods: {
    init () {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        export_state: this.searchData.export_state,
        export_database: this.searchData.export_database,
        export_database_name: this.searchData.export_database_name
      }
      getExportDataBaseList(params).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.results.forEach(function (temp) {
            temp.disabled = true
            if (temp.export_state === '0') {
              temp.state = '未启用'
            }
            if (temp.export_state === '1') {
              temp.state = '已启用'
            }
          })
          this.dataList = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addDataBase () {
      this.modal.title = '添加导出数据库'
      this.modal.show = true
      this.modal.type = '1'
      this.formData = {}
    },
    addDataBaseOk () {
      insertExportDataBase(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '添加成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '添加数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    updateDataBaseOk () {
      updateExportDataBase(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '修改成功'
          })
          this.formData = {}
          this.modal.show = false
          this.init()
        } else {
          this.$Notice.error({
            title: '修改数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    deleteDataBaseOk (param) {
      deleteExportDataBase(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '删除成功'
          })
          this.init()
        } else {
          this.$Notice.error({
            title: '删除数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.init()
    },
    getDataBaseNameList (param) {
      let params = {
        table_schema: param.table_schema,
        export_database: param.export_database
      }
      this.tableData = []
      let that = this
      getDataBaseNameList(params).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.list.forEach(function (temp) {
            let data = {}
            data.key = temp.TABLE_NAME
            data.label = temp.TABLE_COMMENT
            that.tableData.push(data)
          })
          console.log(this.tableData)
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getExportDataBaseTablePageList (param) {
      this.dataList1 = []
      let params = {
        export_database_table: this.searchData1.export_database_table,
        export_database_table_name: this.searchData1.export_database_table_name,
        export_state: this.searchData1.export_state,
        pageNo: this.pageNo1,
        pageSize: this.pageSize1,
        export_database_id: this.row.id
      }
      getExportDataBaseTablePageList(params).then(res => {
        if (res.data.errcode === 0) {
          res.data.data.results.forEach(function (temp) {
            temp.disabled = true
            if (temp.export_state === '0') {
              temp.state = '未启用'
            }
            if (temp.export_state === '1') {
              temp.state = '已启用'
            }
          })
          this.dataList1 = res.data.data.results
          this.totalnum1 = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    updateDataBaseTableOk () {
      updateExportDataBaseTable(this.formData1).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '修改成功'
          })
          this.formData1 = {}
          this.modal1.show = false
          this.getExportDataBaseTablePageList()
        } else {
          this.$Notice.error({
            title: '修改数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addDataBaseTable () {
      this.addTableModal.show = true
      this.getDataBaseNameList(this.row)
    },
    addDataBaseTableOk () {
      let params = {
        export_database_id: this.row.id,
        table_schema: this.row.table_schema,
        table_list: this.targetKeys
      }
      insertExportDataBaseTableList(params).then(res => {
        if (res.data.errcode === 0) {
          this.targetKeys = []
          this.$Message.success({
            background: true,
            content: '添加成功,成功添加' + res.data.data.num + '条'
          })
          this.getExportDataBaseTablePageList()
        } else {
          this.$Notice.error({
            title: '添加数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.getExportDataBaseTablePageList()
    },
    deleteDataBaseTableOk (param) {
      deleteExportDataBaseTable(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success({
            background: true,
            content: '删除成功'
          })
          this.getExportDataBaseTablePageList()
        } else {
          this.$Notice.error({
            title: '删除数据失败',
            desc: res.data.errmsg
          })
        }
      })
      this.getExportDataBaseTablePageList()
    },
    handleChange (newTargetKeys, direction, moveKeys) {
      this.targetKeys = newTargetKeys
      console.log(newTargetKeys, 'newTargetKeys')
      console.log(direction, 'direction')
      console.log(moveKeys, 'moveKeys')
    },
    render (item) {
      return item.key + '\t' + item.label
    },
    changePagesize (pageSize) {
      this.pageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    changePagesize1 (pageSize) {
      this.pageSize1 = pageSize
      this.changePageNo1()
    },
    changePageNo1 (pageNo) {
      this.pageNo1 = pageNo
      this.getExportDataBaseTablePageList()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
